<template>
    <div class="user-tab-container">
        <div class="user-h5-dialog-content">
            <div class="user-h5-dialog-title">
                <span> 个人中心 </span>
                <el-icon class="logout-icon" @click="handleLogout">
                    <SwitchButton />
                </el-icon>
            </div>
            <div class="user-h5-section-title">个人信息</div>
            <div class="user-h5-edit-form">
                <div class="user-h5-edit-row">
                    <span class="user-h5-label">用户名：</span>
                    <el-input v-model="editForm.name" size="large" />
                </div>
                <el-button class="user-h5-btn blue" type="primary" round @click="saveUserInfo">修改个人信息</el-button>
            </div>
            <div class="user-h5-section-title">修改密码</div>
            <form @submit.prevent="savePassword" class="user-h5-edit-form">
                <div class="user-h5-edit-row">
                    <span class="user-h5-label">原密码：</span>
                    <el-input v-model="editForm.password" size="large" type="password" show-password
                        placeholder="请输入原始密码" required />
                </div>
                <div class="user-h5-edit-row">
                    <span class="user-h5-label">新密码：</span>
                    <el-input v-model="editForm.password1" size="large" type="password" show-password
                        placeholder="请输入新密码" required />
                </div>
                <el-button native-type="submit" class="user-h5-btn blue" type="primary" round>
                    修改密码
                </el-button>
            </form>
        </div>
    </div>
</template>

<script setup lang="ts">
// ...个人tab相关逻辑全部迁移自 Home.vue...
import { SwitchButton } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
import { computed, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { asyncchangeuser, asynclogout } from "../../api";
import { Storekey } from "../../interface";
import Studycodemodel from "../../mysql_interface/studycodemodel";

const router = useRouter();
const store = useStore(Storekey);

const editForm = reactive({
    name: '',
    headportrait: '',
    phonenum: '',
    password: '',
    password1: '',
    password2: ''
});
const user = computed<Studycodemodel.Iuser | undefined>(() => store.state.user);

// 修正tab相关逻辑，移除tab和Tabs依赖，直接在onMounted时初始化
function openEdit() {
    editForm.name = user.value?.name || '';
    editForm.headportrait = user.value?.headportrait || '';
    editForm.phonenum = user.value?.phonenum || '';
    editForm.password = '';
    editForm.password1 = '';
    editForm.password2 = '';
}

// 初始化时自动填充
onMounted(() => {
    openEdit();
    if (!user.value) {
        ElMessage.error('请先登录');
        goToLogin();
    }
});

// 退出登录
const handleLogout = async () => {
    try {
        await asynclogout();
        goToLogin();
    } catch (error) {
        ElMessage.error('退出登录失败');
    }
};

async function saveUserInfo() {
    if (!editForm.name) {
        ElMessage.error('用户名不能为空');
        return;
    }
    try {
        await asyncchangeuser({
            name: editForm.name,
            headportrait: editForm.headportrait,
            phonenum: editForm.phonenum
        });
        ElMessage.success('个人信息修改成功');
        await store.dispatch('actiononline');
    } catch (e: any) {
        ElMessage.error(String(e));
    }
}
async function savePassword() {
    if (!editForm.password) {
        ElMessage.error('请输入原始密码');
        return;
    }
    if (!editForm.password1) {
        ElMessage.error('请输入新密码');
        return;
    }
    try {
        await asyncchangeuser({
            password: editForm.password,
            password1: editForm.password1
        });
        ElMessage.success('密码修改成功');
        editForm.password = '';
        editForm.password1 = '';
        editForm.password2 = '';
    } catch (e: any) {
        ElMessage.error(String(e));
    }
}

function goToLogin() {
    router.push({
        name: "登录",
        query: {
            redirect: router.currentRoute.value.fullPath // 记录当前页面路径
        }
    });
}
</script>

<style scoped>
.user-tab-container {
    background: #f5f6fa;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.user-h5-dialog-content {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    margin: 24px 16px 0 16px;
    padding: 18px 16px 32px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.user-h5-dialog-title {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logout-icon {
    font-weight: bolder;
    font-size: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 5px;
    border-radius: 50%;
}

.logout-icon:hover {
    background-color: var(--el-color-info-light-8);
    transform: scale(1.2);
}

.user-h5-section-title {
    font-size: 16px;
    font-weight: bold;
    color: #222;
    margin: 18px 0 10px 0;
}

.user-h5-edit-form {
    padding: 10px 0;
}

.user-h5-edit-row {
    display: flex;
    align-items: center;
    margin: 18px 0;
    gap: 10px;
}

.user-h5-label {
    color: #888;
    min-width: 70px;
    font-size: 15px;
}

.user-h5-btn {
    width: 100%;
    margin: 18px 0 0 0;
    height: 42px;
    font-size: 16px;
    border-radius: 21px;
    background: #409eff;
    border-color: #409eff;
    color: #fff;
}
</style>